<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="菜单列表"
      row-key="path"
      :indent="20"
      :pagination="false"
      :data="menuData"
      :columns="columns"
      :tableheight="600"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button v-permission="'add1'" type="primary" :icon="CirclePlus" @click="addcdbutton">新增菜单 </el-button>
      </template>
      <!-- 菜单图标 -->
      <template #icon="scope">
        <el-icon :size="18">
          <component :is="scope.row.meta.icon"></component>
        </el-icon>
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="EditPen" @click="editbutton(scope.row)"> 新增按钮 </el-button>
        <el-button type="primary" link :icon="Delete" @click="deletebutton(scope.row)"> 删除 </el-button>
      </template>
    </ProTable>

    <el-dialog v-model="dialogVisible" title="菜单详情" width="600" :before-close="handleClose">
      <el-form :model="form" label-width="auto" style="max-width: 600px" ref="ruleFormRef">
        <el-form-item label="父级菜单" prop="Datevalue">
          <div class="selection">
            <el-select
              placeholder="请选择"
              v-model="nameList"
              clearable
              @clear="handleClear"
              ref="selectUpResId"
              style="width: 100%"
            >
              <el-option hidden :key="1" :value="1"></el-option
              ><!--这个必不可少否则显示不出来下拉数据-->
              <!-- check-strictly :父子是否联动，根据业务修改 -->
              <el-tree :data="treeFilterData" node-key="id" :props="dfProps" @node-click="handleNodeClick" ref="treeRef">
              </el-tree>
            </el-select>
          </div>
        </el-form-item>

        <el-form-item label="菜单图标" prop="icon">
          <el-select v-model="form.icon" placeholder="请选择">
            <el-option v-for="item in optionsValue" :key="item.value" :label="item.label" :value="item.value">
              <!-- 使用 scoped slot 自定义选项 -->
              <div style="display: flex; align-items: center">
                <!-- <el-icon v-if="item.icon" :class="item.icon" style="margin-right: 8px"></el-icon> -->
                <el-icon :size="18">
                  <component :is="item.icon"></component>
                </el-icon>
                <span>{{ item.label }}</span>
              </div>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="菜单title" prop="title">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="菜单name" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="菜单路径" prop="path">
          <el-input v-model="form.path" />
        </el-form-item>
        <el-form-item label="组件路径" prop="component">
          <el-input v-model="form.component" />
        </el-form-item>
        <el-form-item label="排序" prop="orderNum">
          <el-input v-model="form.orderNum" />
        </el-form-item>
        <el-form-item>
          <div class="savrnutton">
            <div>
              <el-button type="primary" @click="onSubmit(ruleFormRef)">保存</el-button>
              <!-- <el-button @click="clearbutton(ruleFormRef)">清空</el-button> -->
            </div>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog v-model="dialogVisibletwo" title="按钮详情" width="600" :before-close="handleClosetwo">
      <el-form :model="form" label-width="auto" style="max-width: 600px" ref="ruleFormRef">
        <el-form-item label="按钮 name" prop="bz">
          <el-input v-model="form.bz" />
        </el-form-item>
        <el-form-item label="按钮 key" prop="bz">
          <el-input v-model="form.bz" />
        </el-form-item>

        <el-form-item>
          <div class="savrnutton">
            <div>
              <el-button type="primary" @click="onSubmittwo(ruleFormRef)">保存</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup name="menuMange">
import { ref } from "vue";
import { Delete, EditPen, CirclePlus } from "@element-plus/icons-vue";
import authMenuList from "@/assets/json/authMenuList.json";
import ProTable from "@/components/ProTable/index.vue";
import { delepageMenu, addpageMenu } from "@/api/system/system.js";
import { ElMessageBox, ElMessage } from "element-plus";
let dialogVisible = ref(false);
const proTable = ref();
let mentid = ref();
const ruleFormRef = ref(null);
const menuData = ref(authMenuList.data);
let nameList = ref("");
let form = ref({});
const treeFilterData = ref([]);
let dialogVisibletwo = ref(false);
let selectUpResId = ref();
let dfProps = ref({
  children: "children",
  label: "title"
});
treeFilterData.value = authMenuList.data;
// 表格配置项
const columns = [
  { prop: "meta.title", label: "菜单名称", align: "left", search: { el: "input" } },
  { prop: "meta.icon", label: "菜单图标" },
  { prop: "name", label: "菜单 name", search: { el: "input" } },
  { prop: "path", label: "菜单路径", width: 300, search: { el: "input" } },
  { prop: "component", label: "组件路径", width: 300 },
  { prop: "operation", label: "操作", width: 250, fixed: "right" }
];
let optionsValue = [
  {
    value: "HomeFilled",
    label: "HomeFilled",
    icon: "HomeFilled"
  },
  {
    value: "Stamp",
    label: "Stamp",
    icon: "Stamp"
  },
  {
    value: "Tickets",
    label: "Tickets",
    icon: "Tickets"
  },

  {
    value: "Calendar",
    label: "Calendar",
    icon: "Calendar"
  },
  {
    value: "Menu",
    label: "Menu",
    icon: "Menu"
  },
  {
    value: "Tools",
    label: "Tools",
    icon: "Tools"
  }
];
let menuDatadetail = ref();
function addcdbutton() {
  form.value = {};
  dialogVisible.value = true;
}
const onSubmit = formEl => {
  let param = {
    name: form.value.name, //页面名称
    father: mentid.value, //父菜单ID
    path: form.value.path, //路由地址
    component: form.value.component, //组件路径
    title: form.value.title, //菜单名称
    isLink: "N", //是否为链接
    isHide: "N", //是否隐藏
    isFull: "N", //是否全屏
    isAffix: "N", //是否固定在标签页中
    isKeepAlive: "Y", //是否启用
    icon: form.value.icon, //菜单图标
    orderNum: form.value.orderNum //排序
  };
  if (param.father == undefined) {
    param.father = null;
  }
  addpageMenu(param).then(res => {
    if (res.code === 200) {
      ElMessage.success(res.msg);
    } else {
      ElMessage.error(res.msg);
    }
  });
  dialogVisible.value = false;
};
function onSubmittwo(formEl) {}
const clearbutton = formEl => {
  if (!formEl) return;
  formEl.resetFields();
};
const handleClose = () => {
  dialogVisible.value = false;
};
const handleClosetwo = () => {
  dialogVisibletwo.value = false;
};
function handleNodeClick(data, lst) {
  nameList.value = data.title; //input显示内容
  console.log("99999999999999999", data);
  mentid.value = data.id;
  // 手动关闭 el-select 下拉框
  selectUpResId.value.blur();
}
function handleClear() {
  nameList.value = ""; //input显示内容
  treeRef.value.setCheckedKeys([]); //清空
}
function editbutton(e) {
  console.log("e", e);
  menuDatadetail.value = e;
  dialogVisibletwo.value = true;
}
function deletebutton(e) {
  console.log("e", e);
  ElMessageBox.confirm("确定删除?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    delepageMenu({ id: e.id }).then(res => {
      if (res.code === 200) {
        ElMessage.success(res.msg);
      } else {
        ElMessage.error(res.msg);
      }
    });
  });
}
</script>
<style scoped>
.selection {
  width: 300px;
}
.savrnutton {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}
</style>
